<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- Favicons -->
    <link rel="apple-touch-icon" href="../assets/img/apple-icon.png">
    <link rel="icon" href="../assets/img/favicon.png">
    <title>
        Steema Dashboard components
    </title>
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
    <link rel="stylesheet" href="../assets/css/material-dashboard.css?v=2.0.0">

	<script src="../assets/js/teechart/lib/teechart.js" type="text/javascript"></script>
	<!--<script src="../assets/js/teechart/lib/teechart-maps.js" type="text/javascript"></script>-->
	<script src="../assets/js/teechart/contents.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <!-- Documentation extras -->
    <!-- CSS Just for demo purpose, don't include it in your project -->
    <!--<link href="../assets/assets-for-demo/demo.css" rel="stylesheet" />-->
    <!-- iframe removal -->
	<style>
        .rating {
            color: #F8CA03;
        }
        .jsgrid-table { font:12px Tahoma; }
        .jsgrid-grid-header { background:#A6CAF0; }
        .jsgrid-header-row > .jsgrid-header-cell { background: #A6CAF0; 
                                           				 color: #F5F5F5; }
        .jsgrid-row > .jsgrid-cell { background:#FFFFFF; color:#000000;}
        .jsgrid-alt-row > .jsgrid-cell { background:#FFFFFF; color:#000000;}
    </style>

<script type="text/javascript">	
  window.onload = function () { drawElements(); }
</script>
	
</head>

<body class="">

	<!--data sources-->
	<div id="jsons" style="position:absolute; top;600px; z-index:400; visibility:hidden;">
	<textarea class="container-fluid" id="donut_json" "wrap="off" style="visibility:hidden; height:0px;"></textarea>
	<textarea id="bar_json" "wrap="off" style="visibility:hidden; height:0px;"></textarea>
	<textarea id="area_json" "wrap="off" style="visibility:hidden; height:0px;"></textarea>
	<textarea id="map_json" "wrap="off" style="visibility:hidden; height:0px;"></textarea>
	<script type="text/javascript">	
	  $('#donut_json').load("http://localhost/dashboard/data/DonutChart.JSON");
	  $('#bar_json').load("http://localhost/dashboard/data/BarChart.JSON");
	  $('#area_json').load("http://localhost/dashboard/data/AreaChart.JSON");
	  $('#map_json').load("http://localhost/dashboard/data/MapChart.JSON");
	</script>

	<textarea id="map_json" "wrap="off" style="visibility:hidden; height:0px;"></textarea>
	</div>

	<!-- page layout -->
    <div class="wrapper">
        <div class="main-panel">
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg navbar-transparent  navbar-absolute fixed-top">
                <div class="container-fluid">
                    <div class="navbar-wrapper">
                        <a class="navbar-brand" href="https://www.steema.com">Steema Dashboard components</a>
                    </div>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="navbar-toggler-icon icon-bar"></span>
                        <span class="navbar-toggler-icon icon-bar"></span>
                        <span class="navbar-toggler-icon icon-bar"></span>
                    </button>
                    <div class="collapse navbar-collapse justify-content-end" id="navigation">
                        <form class="navbar-form">
                            <div class="input-group no-border">
                                <input type="text" value="" class="form-control" placeholder="Search...">
                                <button type="submit" class="btn btn-white btn-round btn-just-icon">
                                    <i class="material-icons">search</i>
                                    <div class="ripple-container"></div>
                                </button>
                            </div>
                        </form>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#pablo">
                                    <i class="material-icons">dashboard</i>
                                    <p>
                                        <span class="d-lg-none d-md-block">Stats</span>
                                    </p>
                                </a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="material-icons">notifications</i>
                                    <span class="notification">5</span>
                                    <p>
                                        <span class="d-lg-none d-md-block">Some Actions</span>
                                    </p>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                                    <a class="dropdown-item" href="#">Turn-around for a positive beginning to 2015</a>
                                    <a class="dropdown-item" href="#">You have 5 new tasks</a>
                                    <a class="dropdown-item" href="#">Contact sales-desk</a>
                                    <a class="dropdown-item" href="#">$ exg up</a>
                                    <a class="dropdown-item" href="#">€ exg up</a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#pablo">
                                    <i class="material-icons">person</i>
                                    <p>
                                        <span class="d-lg-none d-md-block">Account</span>
                                    </p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- End Navbar -->
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-3 col-md-6 col-sm-6">
                            <div class="card card-stats" style="background-color:#72A2E3;">
                                <div class="card-header card-header-warning card-header-icon">
                                    <div class="card-icon">
                                        <img src="../assets/img/icondollar.png">
                                    </div>
                                    <p class="card-category" style="color:white;">Total Sales</p>
                                    <h3 class="card-title" style="color:white;"><div id="totalsales"></div></h3>
									<br>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-sm-6">
                            <div class="card card-stats" style="background-color:#72A2E3;">
                                <div class="card-header card-header-warning card-header-icon">
                                    <div class="card-icon">
                                        <img src="../assets/img/iconbox.png">
                                    </div>
                                    <p class="card-category" style="color:white;">Total Items Sold</p>
                                    <h3 class="card-title" style="color:white;"><div id="totalitemssold"></div></h3>
									<br>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-sm-6">
                            <div class="card card-stats" style="background-color:#72A2E3;">
                                <div class="card-header card-header-warning card-header-icon">
                                    <div class="card-icon">
                                        <img src="../assets/img/icondollar.png">
                                    </div>
                                    <p class="card-category" style="color:white;">Total sales In <span id="salesCtry1"></span></p>
                                    <h3 class="card-title" style="color:white;"><div id="totalsalesin"></div></h3>
									<br>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-sm-6">
                            <div class="card card-stats" style="background-color:#72A2E3;">
                                <div class="card-header card-header-warning card-header-icon">
                                    <div class="card-icon">
                                        <img src="../assets/img/icondollar.png">
                                    </div>
                                    <p class="card-category" style="color:white;"><span id="totalsalescountry"></span> <span id="totalsalesyearspan"></span></p>
                                    <h3 class="card-title" style="color:white;"><span id="totalsalesinbetween"></span></h3>
									<br>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card card-chart">
                                <div class="card-body">
                                    <h4 class="card-title">Sales by Country: <span id="salesCtry2"></span></h4>
                                    <p class="card-category">
                                        <!--<span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.</p>
										<br>-->
										<div><canvas id="canvas_area" width="200" height="60" style="width:200px; height:60px"></div>
										<div><canvas id="canvas_area_scroll" width="200" height="60" style="width:200px; height:60px; margin-left:46px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card card-chart">
                                <div class="card-body">
                                    <h4 class="card-title">Total Continent Sales</h4>
                                    <!--<p class="card-category">Last Campaign Performance</p>
									<br>-->
									<canvas id="canvas_bar" width="200" height="107" style="width:200px; height:107px">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card card-chart">
                                <div class="card-body">
                                    <h4 class="card-title">Countries by Continent</h4>
                                    <!--<p class="card-category">Last Campaign Performance</p>
									<br>-->
									<div><canvas id="canvas_donut" width="200" height="107" style="width:200px; height:107px"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 col-md-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="profile" style="height:416px">
											<div id="TeeJSGrid"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <div class="card">
                                <div class="card-body table-responsive" style="height:445px">
									<!--<svg id="world" width="100%" height="300"></svg>-->
									<div><canvas id="canvas_map" width="200" height="200" style="width:200px; height:272px"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <footer class="footer ">
                <div class="container-fluid">
                    <nav class="pull-left">
                        <ul>
                            <li>
                                <a href="https://www.steema.com">
                                    Steema Software SL
                                </a>
                            </li>
                            <li>
                                <a href="https://www.steema.com/about">
                                    About Us
                                </a>
                            </li>
                            <li>
                                <a href="http://steema.com/wp/">
                                    Blog
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <div class="copyright pull-right">
                        &copy;
                        <script>
                            document.write(new Date().getFullYear())
                        </script>, by
                        <a href="https://www.steema.com" target="_blank">Steema Software SL
                    </div>
                </div>
            </footer>
        </div>
    </div>
</body>
<!--   Core JS Files   -->
<script src="../assets/js/core/jquery.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/bootstrap-material-design.js"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<script src="../assets/js/material-dashboard.js?v=2.0.0"></script>
<script type="text/javascript">
    $(document).ready(function() {

        //init wizard

        // demo.initMaterialWizard();

        // Javascript method's body can be found in assets/js/demos.js
        //demo.initDashboardPageCharts();

        //demo.initCharts();
		
		//drawElements();

    });
</script>
<!--

































 -->

</html>
